<template>
  <div class="search-container">
    <!-- 搜索框 -->
    <div class="search">
      <el-input v-model="condition" style="width: 30%; height: 50%" placeholder="搜索你想要的" />
      <el-button class="search-btn" :icon="Search" @click="search()" circle size="large" />
    </div>
    <Waterfall :list="productList" imgSelector="image" :width="220" :animationEffect="'animate__zoomIn'"
      :animationDelay="200" :animationDuration="1000" :posDuration="800" infinite-scroll-immediate="false"
      v-infinite-scroll="loadMore" infinite-scroll-delay="2000">
      <template #default="{ item, url }">
        <div class="waterfull-card" @click="showDetail(item.id)">
          <!-- 封面 -->
          <LazyImg :url="Array.isArray(url) ? url[0] : url" style="border-radius: 10px;" />

          <div class="footer">
            <!-- 标题 -->
            <div class="title"><span v-html="item.title"></span></div>
            <!-- 价格和发货方式 -->
            <div class="price">
              <div style="display: flex; gap: 5px;align-items: baseline;">
                <span style="color: #FF3C55; font-weight: 600; font-size: 14px;">￥{{ formatPrice(item.price) }}</span>
                <span style="font-size: 10px; color: #666666; text-decoration: line-through;">
                  ￥{{ formatPrice(item.originalPrice) }}
                </span>
              </div>
              <span style="font-size: 12px;color: #666666;">{{ item.postType === 0 ? '邮寄' : '自提' }}</span>
            </div>
            <!-- 头像和想要人数 -->
            <div class="avatar-Like">
              <div class="avatar">
                <img class="avatar-img"
                  :src="item.avatar || 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'"
                  style="width: 25px; border-radius: 50%; outline: none;">
                <span style="margin-left: 5px; color: #666666; font-size: 12px;">{{ item.nickName }}</span>
              </div>
              <div class="like">
                <span>
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-shoucang"></use>
                  </svg>
                </span>
                <span style="font-size: 12px; color: #666666;">{{ item.likeCount > 999 ? "999+" : item.likeCount
                  }}</span>
              </div>
            </div>
          </div>
        </div>
      </template>
    </Waterfall>
  </div>
  <!-- 商品详情卡片 -->
  <productInfoDetail ref="detail" />
</template>

<script setup lang='ts'>
import { Search } from '@element-plus/icons-vue'
import { LazyImg, Waterfall } from 'vue-waterfall-plugin-next'
import productInfoDetail from '@/components/productDetail/ProductInfoDetail.vue'
import 'vue-waterfall-plugin-next/dist/style.css'
import { formatPrice } from '@/utils/formatDate'
import { useProductDetailStore } from '@/stores'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { searchProductListApi } from '@/api/productInfo'
import type { Product } from '@/types/product'

const route = useRoute()
// 接收路由参数
const condition = ref<string>('')

// 存储商品列表
const productList = ref<Product[]>()
// 分页相关
const pageSize = 10
const currentPage = 1
onMounted(() => {
  // 接收路由参数
  condition.value = route.query.condition as string
  // 调用searchProductListApi获取商品列表
  searchProductList()
})

// 定义获取搜索商品的方法
const searchProductList = async () => {
  // 调用searchProductListApi获取商品列表
  const res = await searchProductListApi(pageSize, currentPage, condition.value)
  if (res.code === 0) {
    // 处理商品数据
    const newProducts = res.data.records.map((item: Product) => ({
      ...item,
      // 将图片 URL 字符串转为数组
      image: item.image.split(',').map(url => url.replace(/^'|'$/g, '')),
    }))
    // 将新数据添加到商品列表中
    productList.value = newProducts
  }
}
const search = () => {
  searchProductList()
}

// 详情组件
const detail = ref()
// 点击商品卡片，显示商品详情
const showDetail = (productId: string) => {
  useProductDetailStore().getProductDetail(productId)
  detail.value.show()
}
// 触底加载更多
const loadMore = () => {
  console.log('触底加载更多')
}

</script>

<style lang='scss' scoped>
.search-container {
  margin: 0 auto;
  width: var(--view-width);
  height: var(--header-height);

  .waterfull-card {
    transition: all .4s;

    &:hover {
      cursor: pointer;
      transform: translateY(-10px);
    }

    .footer {
      padding: 10px 0;

      .title {
        font-size: 14px;
        margin-bottom: 5px;
        font-weight: 600;
        display: block;
        padding-left: 3px;
      }

      .price {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .avatar-Like {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 5px;

        .avatar {
          display: flex;
          align-items: center;
        }

        .like {
          display: flex;
          align-items: center;

          .icon {
            width: 1em;
            height: 1em;
            fill: currentColor;
            overflow: hidden;
          }
        }
      }
    }
  }

  .search {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 20px 0;
    font-weight: 700;

    :deep(.el-input__wrapper) {
      background-color: var(--dark-background-color);
      padding-left: 20px;
      border-radius: 22px;
      font-size: 23px;
      box-shadow: none;
      caret-color: var(--theme-color);
    }

    :deep(.is-focus) {
      box-shadow: none;
    }

    .search-btn {
      color: var(--theme-color);
      background: none; // 移除按钮的背景
      border: none; // 移除按钮的边框
      box-shadow: none; // 移除按钮的阴影
      cursor: pointer;
      font-size: 27px;
      position: absolute;
      left: 61%;

      &:hover {
        font-size: 30px;
      }
    }

    :deep(.el-button--large.is-circle) {
      padding: 0;
    }
  }
}
</style>
